<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js"></script>
        <style>
            #root{
                display: flex;
                justify-content: space-evenly;
            }
            .basic{
                width: 300px;
                height: 300px;
                border: 1px solid black;
            }
            .happy{
                background-color: hotpink;
            }
            .sad{
                background-color: greenyellow;
            }
            .normal{
                background-color: skyblue;
            }
            .atguigu1{
                text-align: center;
                line-height: 300px;
                font-size: 50px;
                color: rgb(97, 14, 14);
            }
            .atguigu2{
                box-shadow: 0 0 20px rgba(9, 233, 233, 0.541);
           }
           .atguigu3{
               border-radius: 20px;
               
           }
        </style>
    </head>
    <body>
        <!-- 
            绑定样式：
                1.class样式：
                    写法 :class="xxx",xxx可以是字符串、数组、对象
                        字符串：名字不确定，个数确定，需要动态获取
                        对象：  绑定多个样式，个数确定，名字确定
                        数组：绑定多个样式，个数不确定，名字也不确定       
                2.style样式：
                    :style="{fontSize:xxx}",xxx是动态值
                    :style="[a,b]",a,b是样式对象（key值必须是存在的）
         -->

         <div id="root">
             <!-- 字符串写法 -->
             <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
             <!-- 对象写法 -->
             <div class="basic" :class="classObj">{{name}}</div>
             <!-- 数组写法 -->
            <div class="basic" :class="classArr">{{name}}</div>
            <!-- 对象写法 -->
            <div class="basic" :style="styleObj">{{name}}</div>
            <!-- 数组写法 -->
            <div class="basic" :style="styleArr">{{name}}</div>
         </div>
        <script>
            Vue.config.productionTip = false;
            const vm = new Vue({
                el:"#root",
                data:{
                    name:"绑定样式",
                    mood:"normal",
                    classObj:{
                        atguigu1:true,
                        atguigu2:false,
                        atguigu3:false
                    },
                    classArr:[
                        "atguigu1",
                        "atguigu2",
                        "atguigu3"
                    ],
                    styleObj:{
                        fontSize:"100px"
                    },
                    styleArr:[
                        {
                            fontSize:"80px",
                            color:"blue"
                        },
                        {
                            backgroundColor:"pink"
                        }
                    ]
                },
                methods:{
                    changeMood(){
                        this.mood = "happy";
                    }
                }
            })
        </script>
    </body>
</html>